<template>
   <div class="songBox-out">
      <shortcuts></shortcuts>
      <!-- 简介 -->
      <div class="songBox-top" v-if="HighqualityList!=''"> 
         <img :src="''||HighqualityList[0].coverImgUrl" alt="">
             <div class="songBox-top-item">
                <p class="p3">精品推荐</p>
             <p class="p1">
              <span> {{HighqualityList[0].name}}</span></p>
             <p class="p2">{{HighqualityList[0].description}} </p>
           </div> 
      </div>
      <!-- 华语部分 -->
      <div class="tableBox" v-if="hotList">   
      <div class="showTable" >
      <el-popover   v-model="isSortPopShow" placement="right"  popper-class="sortPop" width="400" trigger="click">
      <!-- <el-button slot="reference" class="minspan">华语</el-button> -->
    <!-- <el-button slot="reference" >{{tableOption.cat}} </el-button> -->
      <div class="text" slot="reference">{{tableOption.cat}}</div>
     <showTable
     @passName=passName
     :allTable=allTable
     />
     </el-popover>
      </div>
          <ul>    
             <li :class="{active:i===changeIndx}" @click="changeTable(i,item)" v-for="(item,i) in hotList" :key="i">{{item.name}}</li>
          </ul>
      </div>
      <!-- 歌单展示 -->
      <songList
     :songList=songList
     /> 
     <!-- 分页器展示 -->
      <div class="burster">  
      <el-pagination
      background
      layout="prev, pager, next"
     :total="total"
     @current-change="changePage"
     >
    </el-pagination>
      </div>
 </div>
   </div>
    
</template>

<script>
import showTable from "../common/UseOnce/showTable"
export default {
   components:{
showTable
   },
     data(){
        return{ 
           changeIndx:0,
           HighqualityList:[], //顶部介绍
           hotList:[],  //选项
           songList:[], //获取歌单数据
           total:0, //总数据
           allTable:[],
           isSortPopShow:false,
           tableOption:{   
            cat:"",
            limit:50,
            offset:1
           } 
        }
     },
     methods:{
       async getHighquality(){  //获取顶部介绍
           const {data:res} = await this.$request("/top/playlist/highquality",{
            limit:1,

           })
          if(res.code!=200) return 
          this.HighqualityList=res.playlists
        },
        async getTableItem(){  
           const {data:res}=await this.$request("/playlist/hot")
           
           this.hotList=res.tags
      
        }, 
         async getSongdata(value){ 
       //获取初始页面加载歌单
           const {data:res}=await this.$request("/top/playlist",{
            cat:value.cat,
            limit:value.limit,
            offset:value.offset
           })
           if(res.code!=200) return
           console.log(res)
           this.songList=res.playlists
            this.total=res.total
            document.documentElement.scrollTop = document.body.scrollTop = 0;
        },
        //获取点击选项获歌单
        changeTable(num,item){
            this.changeIndx=num;
            this.tableOption.cat=item.name
            this.songList=[]
            this.getSongdata( this.tableOption)
        },
        changePage(value){  //通过分页器 加载每页新数据
          this.tableOption.offset=value*50
         this.getSongdata( this.tableOption)
            
        },
        //获取所有标签选项
        async getAllTable(){
           const {data:res}=await this.$request("/playlist/catlist")
           console.log(res)
           this.allTable=res.sub
        },
        //得到所有标签选项所点击的值 然后发起请求
        passName(value){
           this.isSortPopShow=false
           this.changeIndx=-1
            this.tableOption.cat=value.name
           this.getSongdata(this.tableOption)
        },
        //跳转歌单歌曲详情 传入id
          skipRouter(id){
          this.$route.push(`/MusicDetails?id=${id}`)
       }
     },
     watch:{   //监听数据展示刚加载华语标签
       hotList(value){
          this.tableOption.cat=value[0].name
          this.getSongdata(this.tableOption)
       },
     },
     mounted(){
      //   获取精品歌单
        this.getHighquality()
      //   精品歌单标签列表
        this.getTableItem() 
      //获取所有标签选项
       this.getAllTable()      
     } 
}
</script>

<style lang="less" scpoed>
   .songBox-out{
  width: 1300px;
  display: flex;
  flex-direction:column;
  padding:20px 40px 90px 40px;
  .burster{
     margin:0 auto;
  }
  .songBox-top{
     display:flex;
     align-items:center;
     width:100%;
     height:180px;
    
     border-radius:15px;
     background:radial-gradient(
        circle at top left,
        #608742 40%,
        #757A39 ,
        #608742,
        #374545,
        #596859
     );
     img{
        margin-left:30px;
        width:120px;
        height:120px;
       border-radius:10px;
     }
  }
  .songBox-top-item{
         width:100%;
         height:180px;
         padding-left:10px;
     
     .p1{
         //  display:flex;
        padding:10px 0;
        color:#FFFFFF;
       
     }
       .p3{
         //  display:block;
         margin-top:10px;
         width:100px;
         height:30px;
         line-height:30px;
         text-align:center;
         color:#E7AA5A;
         border:1px solid #E7AA5A;
         border-radius: 10px;
     }
     .p2{
         display:flex;
         line-clamp:3;
         text-overflow:hidden;
         font-size:10px;
          color:#aaa;
     } 
  }

 .tableBox{
    width:100%;
    height:30px;
    display:flex;
    margin:20px 0 30px 0;
   .showTable{
      .text{
         width:60px;
         height:30px;
         line-height:30px;
         border-radius:10px;
         border:1px solid #ccc;
         color:#aaa;
         text-align:center;
         background-color:#fff;
         &:hover{
              background-color:#ccc;
                 color:black;
         }
      }
   }
    ul{
       width:100%;
       height:30px;
      display:flex;
     align-items:center; 
     justify-content:flex-end;
    
       li{
      //  padding:0 10px;
      margin:0 10px;
       font-size:14px;
       color:#666666;
      }
         .active{
         font-size:14px;
         border-radius:10px;
         background-color:#A99A6B;
         line-height:20px;
         text-align:center;
         width:70px;
         height:20px;

  }
     }  
   }
}

</style>